<template>
  <el-row justify="end">
    <el-button @click="openForm">
      <Icon class="mr-5px" icon="ep:edit" />
      {{ compliance.id ? '编辑合规性安全管理信息' : '新增合规性安全管理信息' }}
    </el-button>
  </el-row>
  <label class="font-bold">易制毒、易制爆管理</label>
  <CompliancePdeList
    :key="compliancePdeListRefKey"
    ref="compliancePdeListRef"
    :compliance="compliance"
  />
  <label class="font-bold">剧毒品管理</label>
  <ComplianceDrugsList
    :key="complianceDrugsListRefKey"
    ref="complianceDrugsListRef"
    :compliance="compliance"
  />
  <label class="font-bold">合规性手续</label>
  <ComplianceProceduresList
    :key="complianceProceduresListRefKey"
    ref="complianceProceduresListRef"
    :compliance="compliance"
  />
  <label class="font-bold">生产负责人</label>
  <ComplianceAdminList
    :key="complianceAdminListRefKey"
    ref="complianceAdminListRef"
    :compliance="compliance"
  />
  <label class="font-bold">主要负责人</label>
  <ComplianceInchargeList
    :key="complianceInchargeListRefKey"
    ref="complianceInchargeListRef"
    :compliance="compliance"
  />
  <label class="font-bold">特种/危险作业人员信息</label>
  <ComplianceOperatorList
    :key="complianceOperatorListRefKey"
    ref="complianceOperatorListRef"
    :compliance="compliance"
  />
  <label class="font-bold">特种设备明细信息</label>
  <ComplianceSpecialEquipmentList
    :key="complianceSpecialEquipmentListRefKey"
    ref="complianceSpecialEquipmentListRef"
    :compliance="compliance"
  />
  <ContentWrap>
    <el-collapse v-model="activeNames" class="">
      <el-collapse-item name="systemInfo">
        <template #title>
          <span class="text-base font-bold">系统信息</span>
        </template>
        <el-descriptions :column="4">
          <el-descriptions-item label="创建人">{{ compliance.creatorName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(compliance.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="修改人">{{ compliance.updaterName }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">
            {{ formatDate(compliance.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </ContentWrap>
  <!-- 表单弹窗：添加 -->
  <ComplianceForm ref="formRef" @success="refresh" />
</template>
<script lang="ts" setup>
import { ComplianceApi, ComplianceVO } from '@/api/crm/compliance'
import ComplianceDrugsList from '@/views/crm/compliance/components/ComplianceDrugsList.vue'
import CompliancePdeList from '@/views/crm/compliance/components/CompliancePdeList.vue'
import ComplianceProceduresList from '@/views/crm/compliance/components/ComplianceProceduresList.vue'
import ComplianceAdminList from '@/views/crm/compliance/components/ComplianceAdminList.vue'
import ComplianceInchargeList from '@/views/crm/compliance/components/ComplianceInchargeList.vue'
import ComplianceOperatorList from '@/views/crm/compliance/components/ComplianceOperatorList.vue'
import ComplianceSpecialEquipmentList from '@/views/crm/compliance/components/ComplianceSpecialEquipmentList.vue'
import { formatDate } from '@/utils/formatTime'
import ComplianceForm from '@/views/crm/compliance/ComplianceForm.vue'

defineOptions({ name: 'ComplianceDetail' })
const props = defineProps<{ id?: number,bizId?: number }>()
const route = useRoute();
const openForm = () => {
  formRef.value.open(compliance.value.id ? 'update' : 'create', compliance.value.id, props.bizId)
}
const formLoading = ref(false) // 表单的加载中
const compliance = ref<ComplianceVO>({} as ComplianceVO) // 企业工商信息详情
const formRef = ref()
const complianceDrugsListRefKey = ref(new Date().getTime())
const compliancePdeListRefKey = ref(new Date().getTime())
const complianceProceduresListRefKey = ref(new Date().getTime())
const complianceAdminListRefKey = ref(new Date().getTime())
const complianceInchargeListRefKey = ref(new Date().getTime())
const complianceOperatorListRefKey = ref(new Date().getTime())
const complianceSpecialEquipmentListRefKey = ref(new Date().getTime())
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => props.bizId,
  async (val) => {
    if (!val) {
      return
    }
    try {
      formLoading.value = true
      const data = await ComplianceApi.getComplianceByCustomerId(val)
      if (!data) {
        return
      }
      compliance.value = data
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)
const activeNames = ref(['basicInfo', 'systemInfo']) // 展示的折叠面板
const refresh = async () => {
  complianceDrugsListRefKey.value = new Date().getTime()
  compliancePdeListRefKey.value = new Date().getTime()
  complianceProceduresListRefKey.value = new Date().getTime()
  complianceAdminListRefKey.value = new Date().getTime()
  complianceInchargeListRefKey.value = new Date().getTime()
  complianceOperatorListRefKey.value = new Date().getTime()
  complianceSpecialEquipmentListRefKey.value = new Date().getTime()
  try {
    formLoading.value = true
    const data = await ComplianceApi.getComplianceByCustomerId(props.bizId)
    if (!data) {
      return
    }
    compliance.value = data
  } finally {
    formLoading.value = false
  }
}

/** 初始化 */
onMounted(async () => {
  const id = props.id || route.params.id
  const customerId = props.bizId
  try {
    formLoading.value = true
    if(customerId){
      const data = await ComplianceApi.getComplianceByCustomerId(customerId)
      if (!data) {
        return
      }
      compliance.value = data
    } else {
      if(id){
        const data = await ComplianceApi.getCompliance(id)
        if (!data) {
          return
        }
        compliance.value = data
      }
    }
  } finally {
    formLoading.value = false
  }
})
</script>
